<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script type="text/javascript">
    var options = {
        id : "treeId",
        parentId : "treeParentId",
        pagination: true,
        showColumns : false,
        showRefresh : false,
        expandFirst : false,
        expandColumn : 1,
        url : "/dms/page",
        queryParamsType : "",
        sidePagination : 'server',//server:服务器端分页|client：前端分页
        pageList : [10,30,50,70,100],//可选择单页记录数
        columns : [
            {checkbox : true},
            {field : "name",title : "名字",align:"center"},
            {field : "namespace",title : "空间",align:"center"},
            {field : "shortId",title : "编号",align:"center"},
            {field : "id",title : "地址",align:"center",    formatter : function (value, row, index) {
                    return  value ? value.replace(/\./g,"/") : "";
                }
            },
            {field : "rest",title : "web接口",align:"center",    formatter : function (value, row, index) {
                    return  value ? "是" : "否";
                }
            },
            {field : "method",title : "方式",align:"center"},
            {field : "operate",title : "操作",align:"center",
                formatter : function (value, row, index) {
                    return "<button type='button' class='btn btn-link detail' rid='"+row.id+"'>详情</button>";
                }
             },
            {field : "uid",title : "UID",visible:false},
        ],
        queryParams : function(params){
            var form = $("#apiSearch").serializable();
            return $.extend({},(params ? params : {}),form);
        },
        responseHandler : function (response) {
            return {total : response.total ,rows : response.records};
        }
    };

    $(function () {
        $("#apiTable").bootstrapTreeTable(options);
        //查询
        $("#apiSearch").on("click",".search",function (event) {
            var params = $("#apiSearch").serializable();
            $("#apiTable").bootstrapTreeTable("refresh",params);
        });
        //详情
        $("#apiTable").on("click",".detail",function (event) {
            var rid = $(this).attr("rid");
            window.open("/pages/dms/api/api.html?id="+rid);
        })
    });
</script>
<body>

<div>
    <form id="apiSearch" class="form-inline">
        <label class="sr-only">命名空间</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="namespace" name="namespace" placeholder="命名空间">

        <label class="sr-only">编号</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="shortId" name="shortId" placeholder="编号">

        <label class="sr-only">类型</label>
        <select class="form-control mb-2 mr-sm-2"  id="method" name="method" placeholder="类型">
            <option value=''>   请选择   </option>
            <option value='GET'>GET</option>
            <option value='POST'>POST</option>
            <option value='PUT'>PUT</option>
            <option value='DELETE'>DELETE</option>
            <option value='HEAD'>HEAD</option>
            <option value='OPTIONS'>OPTIONS</option>
            <option value='PATCH'>PATCH</option>
            <option value='TRACE'>TRACE</option>
        </select>

        <button type="button" class="btn btn-primary mb-2 search">查询</button>
    </form>
</div>
<div class="table-responsive-md">
    <table id="apiTable" class="table-sm"></table>
</div>

</body>
</html>